const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const {SkeletonPlugin} = require('./skeleton')

module.exports = {
  mode: 'development',
  devtool: false,

  entry: './src/index.js',

  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'main.js'
  },

  module:{
    rules: [
      {
        test:/\.js$/,
        use:[
          {
            loader:'babel-loader',
            options: {
              presets:['@babel/preset-env','@babel/preset-react']
            },
          }
        ],
        exclude:/node_modules/
      }
    ]
  },

  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),

    //我们要启动一个静态文件服务器, 去显示dist目录里的页面
    new SkeletonPlugin({
      staticDir: path.resolve(__dirname,'dist'),
      port: 8000, // 我们打包后代码要访问的那个静态服务器的port
      origin: 'http://localhost:8000', // 通过 puppeteer 打开的无头浏览器要访问的地址 (即我们显示打包后代码的那个静态服务器的地址)
      device: 'iPhone 6', // puppeteer 打开的无头浏览器要模拟的设备类型
      // defer: 2000, //给出 skeletonScript.js 脚本执行时间

      button: {
        color: '#111'
      },
      image: {
        color: '#111'
      }
    })
  ]
}
